<div class="left-column">
  <h2>{{ 'Status' | translate }}</h2>
</div>

<div class="enclosure-container">
  <div class="image-container">
    <ix-enclosure-side
      class="enclosure-image"
      [class.has-side-switch]="hasMoreThanOneSide()"
      [enclosure]="enclosure()"
      [side]="selectedSide()"
      [slotTintFn]="diskStatusTint"
      [selectedSlot]="selectedSlot()"
      (selectedSlotChange)="onSlotSelected($event)"
    ></ix-enclosure-side>
  </div>

  @if (hasMoreThanOneSide()) {
    <ix-enclosure-side-switch
      class="side-switch"
      [enclosure]="enclosure()"
    ></ix-enclosure-side-switch>
  }
</div>

<div class="right-column">
  <ix-statuses-legend
    [slots]="selectedEnclosureSlots()"
  ></ix-statuses-legend>
</div>
